<template>
  <div v-loading="processFlg || fileFlg"  element-loading-text="数据加载中...">
    <el-form ref="form" :model="form" label-width="80px" style="display: flex; flex-wrap: wrap; align-items: center;">
      <el-form-item label="流程图号">
        <el-input v-model="form.flowChartNo" disabled placeholder="请输入流程图号"  style="width:200px;margin-right: 5px"></el-input>
      </el-form-item>
      <el-form-item label="标准工时">
        <el-input v-model="form.standardWorkHours" disabled placeholder="请输入标准工时" style="width:200px;margin-right: 5px"></el-input>
      </el-form-item>
      <el-form-item label="品号">
        <el-select v-model="form.articleNumber"  disabled placeholder="请选择品号" filterable clearable style="width:200px;margin-right: 5px">
          <el-option
              v-for="item in itemCodeList"
              :label="item.itemCode"
              :value="item.itemCode"
              @click.native="itemCodeChange(item)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  style="width: 100px" @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border  align="center">
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column label="工序名称" align="center" property="processName">
      </el-table-column>
      <el-table-column label="首检单" align="center" property="firstCheckSheet">
      </el-table-column>
      <el-table-column label="警示牌" align="center" property="warningSigns">
      </el-table-column>
      <el-table-column label="SOP文件" align="center" property="sopFile">
      </el-table-column>
      <el-table-column label="工艺方案" align="center" property="processScheme">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import XLSX from 'xlsx'
const XLSX = require('xlsx')
import {getByFlowChartNo} from '@/api/workorder/hdviewapiitem'
import {getPfocProcessList } from '@/api/pfoc/pfocprocess'
import {getFileList } from '@/api/pfoc/filelibrary'
import {getFlowChartHistoryInfo} from '@/api/pfoc/productproductionreleasehistory'
export default {
  name: 'editFlowChart',
  props: {
    id: {
      type: String,
    }
  },
  data() {
    return {
      form: {
        flowChartNo: null,//流程图号
        standardWorkHours: null,//标准工时
        articleNumber: null,//品号
        productLineType: null //产品类型
      },
      tableData: [],
      processList: [],
      processFlg: true,
      fileList:[],
      fileFlg: true,
      itemCodeList:[],
      loading: null // 用于存储loading实例
    }
  },
  //监听流程图号输入
  watch: {
    'form.flowChartNo': function(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.getItemCodeByFlowChartData(newValue)
      }
    }
  },
  created() {
    // 获取工序名称数据
    this.getProcessListData()
    //获取文件数据
    this.getFileListData();
  },
  mounted() {
  },
  methods: {
    //根据id查询流程图信息
    getFlowChartData() {
      this.tableData = [];
      getFlowChartHistoryInfo(this.id).then(response => {
        const main  =response.data.data;
        const detail = main.listProductProductionReleaseHistoryDetails;
        this.form = {
          flowChartNo: main.flowChartNo,
          standardWorkHours: main.standardWorkHours,
          articleNumber: main.articleNumber,
          productLineType: main.productLineType,
        }
        //循环detail为table赋值用foreach
        detail.forEach((item, index) => {
          this.tableData.push({
            processName: item.processName,
            firstCheckSheet:  item.firstCheckSheet,
            warningSigns: item.warningSigns ,
            sopFile: item.sopFile,
            processScheme: item.processScheme

          })
        })
      })
    },
    // 获取工序名称数据
    getProcessListData() {
      getPfocProcessList().then(response => {
        this.processList = response.data.data
        this.processFlg = false
      })
    },
    getFileListData() {
      getFileList().then(response => {
        this.fileList = response.data.data
        this.fileFlg = false
      })
    },
    //根据流程图号查询品号集合
    getItemCodeByFlowChartData(flowChartNo) {
      if (!this.validatenull(flowChartNo)) {
        getByFlowChartNo(flowChartNo).then(response => {
          this.itemCodeList = response.data.data
          if(this.validatenull(this.itemCodeList)){
            this.$message({
              message: '未查询到输入流程图号对应品号数据',
              type: 'warning'
            })
          }
        })
      }else{
        this.itemCodeList = [];
      }
    },
    itemCodeChange(item){
      this.form.productLineType = item.class5 + item.class6;;
    },
    handleClose(){
      this.$emit('closeDialog')//关闭
    }
  }
}
</script>

<style scoped>
</style>
